<script setup lang="ts">

const commentContent = ref(null)
</script>

<template>
  <div>
     <textarea
         class="comment-textarea"
         v-model="commentContent"
         placeholder="写下点什么..."
         maxlength="1000"/>

  </div>
</template>

<style scoped lang="scss">
.comment-textarea {
  border: 1px solid var(--lightGray);
  width: 100%;
  font-size: 14px;
  padding: 15px;
  min-height: 180px;
  /* 不改变大小 */
  resize: none;
  /* 不改变边框 */
  outline: none;
  border-radius: 4px;
  background-image: url("/src/assets/images/commeny.png");
  background-size:30%;
  background-repeat: no-repeat;
  background-position: 100%;
  background-position-y: 100%;
  margin-bottom: 10px;
}

.comment-textarea:focus {
  border-color: var(--themeBackground);
}

.myEmoji {
  font-size: 18px;
  cursor: pointer;
  transition: all 0.5s;
  margin-right: 12px;
}

.myEmoji:hover {
  transform: rotate(360deg);
  font-size: 22px;
}

.myPicture {
  font-size: 18px;
  cursor: pointer;
}

.emoji-active {
  color: var(--red);
}
</style>
